<template>
	<view class="order-box">
		<view class="tab">
			<view class="item" @tap="tab(1)" :class="actInx ==1 ?'active':''">
				彩绘甲
			</view>
			<!-- <view class="item" @tap="tab(2)" :class="actInx ==2 ?'active':''">
				穿戴甲
			</view> -->
			<view class="item" @tap="tab(3)" :class="actInx ==3 ?'active':''">
				商品
			</view>
		</view>
		<view class="my-order-list" v-if="actInx ==1 && show">
			<view class="item" v-for="item in listData" :key="item.id" @tap="goDetail(item)">
				<view class="top">
					<image :src="item.subjectRenderingPic" class="img"></image>
					<view class="r">
						{{item.subjectTitle || ''}} 
						<!-- <text class="x">X{{item.printCount || ''}}</text> -->
						<view class="price">
							<text class="t">￥</text>{{item.payAmount || ''}}
						</view>
						<view class="time">{{item.createTime || ''}} 
						<text class="zt" :class="{'error-color':(item.orderStatus == 1 || item.orderStatus == 2 || item.orderStatus == 7),'success-color':item.orderStatus == 4 || item.orderStatus == 6}">{{orderStatus(item.orderStatus)}}</text></view>
					</view>
				</view>
			</view>
			<empty @reload="getPrintList" v-if="listData.length < 1 && show"/>
		</view>
		<!--穿戴甲-->
		<view class="my-order-list" v-if="actInx ==2 && show">
			<view class="item" v-for="item in listData" :key="item.id" @tap="goDetail(item)">
				<view class="top">
					<image :src="item.goodsImg" class="img"></image>
					<view class="r">
						{{item.goodsName || ''}} <text class="x">X{{item.goodsCount || ''}}</text>
						<view class="price">
							<text class="t">￥</text>{{item.payAmount || ''}}
						</view>
						<view class="time">{{item.createTime || ''}} 
							<text class="zt" :class="{'error-color':(item.goodsOrderStatus == 1 || item.goodsOrderStatus == 2 || item.goodsOrderStatus == 9),'success-color':item.goodsOrderStatus == 7 || item.goodsOrderStatus == 8}" v-for="state in goodsState" :key="state.id">{{state.id == item.goodsOrderStatus ? state.name:''}}</text>
						</view>
					</view>
				</view>
			</view>
			<empty @reload="getPrintList" v-if="listData.length < 1 && show"/>
		</view>
		<!--商品-->
		<view class="my-order-list" v-if="actInx ==3">
			<view class="item" v-for="item in listData" :key="item.id" @tap="goDetail(item)">
				<view class="top">
					<view class="img" v-if="item.goodsInfos">
						<image :src="url.goodsImg" v-for="(url,index) in item.goodsInfos" :key="index" class="mr" :class="{'a':item.goodsInfos.length == 2,'b':item.goodsInfos.length == 3,'c':item.goodsInfos.length == 4}"></image>
					</view>
					<view class="r">
						{{item.goodsName || ''}} <text class="x">X{{item.goodsCount || ''}}</text>
						<view class="price">
							<text class="t">￥</text>{{item.payAmount || ''}}
						</view>
						<view class="time">{{item.createTime || ''}} <text class="zt" :class="{'error-color':(item.goodsOrderStatus == 1 || item.goodsOrderStatus == 2 || item.goodsOrderStatus == 9),'success-color':item.goodsOrderStatus == 7 || item.goodsOrderStatus == 8}" v-for="s in goodsState" :key="s.id">{{s.id == item.goodsOrderStatus ? s.name:''}}</text></view>
					</view>
				</view>
			</view>
			<empty @reload="getPrintList" v-if="listData.length < 1"/>
		</view>
	</view>
</template>

<script>
	import Tabbar from '@/components/tabBar.vue'
	import empty from "@/components/empty.vue";
	import share from '@/utils/share.js'
	import {getSharePrintOrder,getGoodsOrderList,getPrintOrderList,queryMyGoodsOrderList} from '@/api/order.js'
	export default {
		// mixins:[share],
		components:{
			Tabbar,
			empty
		},
		data() {
			return {
				actInx: 1,
				listData: [],
				goodsState:[{
					name: '待支付',
					id: 1
				},{
					name: '支付失败',
					id: 2
				},{
					name: '待发货',
					id: 3
				},{
					name: '已打包',
					id: 4
				},{
					name: '已发货',
					id: 5
				},{
					name: '配送中',
					id: 6
				},{
					name: '已签收',
					id: 7
				},{
					name: '退款成功',
					id: 8
				},{
					name: '退款失败',
					id: 9
				},{
					name: '退款处理中',
					id: 10
				}],
				printState1:[
					{
						name: '待支付',
						id: 1
					},
					{
						name: '支付完成',
						id: 2
					},
					{
						name: '待退款',
						id: 3
					},
					{
						name: '退款完成',
						id: 4
					},
				],
				printState:[
					{
						name: '待支付',
						id: 1
					},{
						name: '支付失败',
						id: 2
					},
					// {
					// 	name: '待打印',
					// 	id: 3
					// },
					{
						name: '打印完成',
						id: 4
					},{
						name: '退款处理中',
						id: 5
					},{
						name: '退款完成',
						id: 6
					},{
						name: '退款失败',
						id: 7
					},{
						name: '打印未完成',
						id: 8
					}
				],
				show: false
				// 打印订单状态
				// 支付状态： 1 待支付  2 支付失败 3 待打印 4 打印完成 5 退款处理中 6 退款完成 7 退款失败
			};
		},
		onLaunch() {
			//隐藏官方的tabBar
			uni.hideTabBar()
		},
		onLoad(ops) {
			this.actInx = ops.type || 1
			console.log(ops,'00000000',this.actInx)
			// this.getList()
			this.tab(this.actInx)
		},
		methods:{
			orderStatus(id){
				let str = ''
				this.printState1.forEach(ele =>{
					if(ele.id == id) {
						str = ele.name
					}
				})
				return str
			},
			tab(t){
				this.actInx = t
				
				if(t==1){
					this.getPrintList()
				}
				if(t==2){
					this.getGoodsList()
				}
				if(t==3){
					this.getCommodity()
				}
			},
			goUrl(url){
				uni.navigateTo({
					url
				})
			},
			// 跳转详情
			goDetail(ops){
				if(this.actInx==1){
					uni.navigateTo({
						url:'/pagesB/order/printOrderDetail?id='+ops.id
					})
				}
				if(this.actInx==2){
					uni.navigateTo({
						url:'/pagesB/order/goodsOrderDetail?id='+ops.id
					})
				}
				if(this.actInx==3){
					uni.navigateTo({
						url:'/pagesB/order/commodityOrderDetail?id='+ops.id
					})
				}
			},
			// 彩绘甲
			getPrintList(){
				getPrintOrderList().then((res) =>{
					this.listData = res
					this.show = true
				})
			},
			// 穿戴甲
			getGoodsList(){
				getGoodsOrderList().then((res) =>{
					this.listData = res
					this.show = true
				})
			},
			// 商品
			getCommodity(){
				console.log('0000000')
				queryMyGoodsOrderList().then((res) =>{
					this.listData = res
				})
			},
			scanCode() {
				// 允许从相机和相册扫码
				uni.scanCode({
					scanType: ["qrCode"],
					success: (res) => {
						console.log(res);
						if (res.result) {
							const val = res.result;
							console.log('scanCode',val)
						} else {
							console.log('请重新扫描');
							return false;
						}
					},
					fail: (res) => {
						console.log('未识别到二维码');
					}
				})
			},
			// 对扫码后，得到的url地址参数的处理。
			parseUrl(url) {
				let pattern = /(\w+)=([0-9a-zA-Z\u4e00-\u9fa5]+)/ig;
				let parames = {};
				url.replace(pattern, function(a, b, c) {
					parames[b] = c;
				});
				return parames;// 返回一个参数名：参数值 的对象。
			}
		}
	}
</script>

<style lang="less" scoped>
	@bg: #EB8DA7;
	.order-box{
		padding-top: 32rpx;
		margin: 0 26rpx;
		padding-bottom: 30rpx;
		.tab{
			border-radius: 81rpx;
			background: #E4919D;
			height: 90rpx;
			color: #fff;
			display: flex;
			.item{
				flex: 1;
				font-size: 28rpx;
				font-weight: 500;
				border-radius: 81rpx;
				margin: 5rpx;
				line-height: 88rpx;
				text-align: center;
			}
			.active{
				color: #333;
				background: #fff;
			}
		}
		
		.dy-order-list{
			margin-top: 32rpx;
			.item{
				// height: 280rpx;
				border-radius: 24rpx;
				background-color: #fff;
				padding: 32rpx;
				padding-right: 20rpx;
				margin-bottom: 32rpx;
			}
			.top{
				display: flex;
				position: relative;
				.img{
					width: 200rpx;
					height: 200rpx;
					border-radius: 16rpx;
					margin-right: 16rpx;
				}
				.r{
					font-size: 30rpx;
					color: #333;
					.price{
						color: #666;
						margin-top: 24rpx;
					}
					.t{
						font-size: 22rpx;
					}
				}
				.right-state{
					position: absolute;
					right: -22rpx;
					top: -32rpx;
					width: 92rpx;
					height: 44rpx;
					border-radius: 0px 24rpx 0px 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background: #F8D48A;
					font-family: PingFangSC-Medium;
					font-size: 20rpx;
					color: #fff;
				}
				.done{
					background: #AAAAAA;
				}
			}
			.desc{
				margin-top: 12rpx;
				display: flex;
				align-items: center;
				.time{
					font-size: 24rpx;
					color: #AAAAAA;
					flex: 1;
				}
				.icon{
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
					position: relative;
					top: 8rpx;
				}
				.share{
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					width: 144rpx;
					min-height: 1rpx;
					border-radius: 32rpx;
					box-sizing: border-box;
					border: 2rpx solid @bg;
					background-color: #fff !important;
					font-size: 28rpx;
					color: @bg;
					// margin-left: 26rpx;
					margin-right: 24rpx;
					display: inline-block;
					text-align: center;
					line-height: normal;
					padding: 10rpx 15rpx;
					padding-bottom: 13rpx;
				}
				.scan{
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					width: 200rpx;
					// height: 64rpx;
					min-height: 1rpx;
					border-radius: 32rpx;
					box-sizing: border-box;
					background-color: @bg;
					border: 2rpx solid @bg;
					font-size: 28rpx;
					color: #fff;
					display: inline-block;
					text-align: center;
					line-height: normal;
					padding: 10rpx 15rpx;
					padding-bottom: 13rpx;
				}
				.e-right{
					text-align: right;
					display: flex;
					margin-left: 25rpx;
				}
			}
		}
		
		.my-order-list{
			margin-top: 32rpx;
			.item{
				// height: 280rpx;
				border-radius: 24rpx;
				background-color: #fff;
				padding: 32rpx;
				margin-bottom: 32rpx;
			}
			.top{
				display: flex;
				position: relative;
				.img{
					width: 200rpx;
					height: 200rpx;
					border-radius: 16rpx;
					margin-right: 36rpx;
				}
				.mr{
					width: 200rpx;
					height: 200rpx;
					border-radius: 8rpx;
				}
				.a{
					width: 100rpx;
					height: 100rpx;
					margin-top: 60rpx;
				}
				
				.b{
					width: 100rpx;
					height: 100rpx;
				}
				.b:nth-child(1){
					display: block;
					margin: 0 auto;
				}
				.c{
					width: 100rpx;
					height: 100rpx;
				}
				.r{
					font-size: 30rpx;
					color: #333;
					padding-top: 10rpx;
					flex: 1;
					.x{
						color: #666666;
						float: right;
					}
					.price{
						color: #E4919D;
						margin-top: 46rpx;
						font-size: 36rpx;
					}
					.t{
						font-size: 22rpx;
					}
					.time{
						color: #AAAAAA;
						font-size: 28rpx;
						padding-top: 12rpx;
						.zt{
							float: right;
							color: #666;
							position: relative;
							top: -55rpx;
						}
						.red{
							color: red;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
</style>
